<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>问答详情 - 知享社区</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #3b82f6;
            --secondary: #8b5cf6;
            --success: #10b981;
            --warning: #f59e0b;
            --danger: #ef4444;
            --text-primary: #1e293b;
            --text-secondary: #64748b;
            --text-tertiary: #94a3b8;
            --bg-light: #f8fafc;
            --bg-white: #ffffff;
            --border-light: #e2e8f0;
            --radius: 10px;
            --shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--bg-light);
            color: var(--text-primary);
            padding-top: 56px;
            padding-bottom: 70px;
        }
        
        /* 顶部导航 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 56px;
            background-color: var(--bg-white);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            z-index: 1000;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
            border-bottom: 1px solid var(--border-light);
        }
        
        .nav-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--text-primary);
            text-align: center;
            flex: 1;
        }
        
        .nav-btn {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 20px;
        }
        
        .nav-btn.primary {
            color: var(--primary);
        }
        
        /* 问答详情容器 */
        .question-detail-container {
            background-color: var(--bg-white);
            padding: 16px;
            margin-bottom: 12px;
        }
        
        /* 问题头部 */
        .question-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 16px;
        }
        
        .question-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .question-author {
            flex: 1;
        }
        
        .author-name {
            font-size: 15px;
            font-weight: 600;
            margin-bottom: 2px;
        }
        
        .question-meta {
            font-size: 12px;
            color: var(--text-tertiary);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .question-menu {
            color: var(--text-tertiary);
            background: none;
            border: none;
            font-size: 16px;
        }
        
        /* 问题内容 */
        .question-content {
            margin-bottom: 16px;
        }
        
        .question-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 12px;
            line-height: 1.5;
        }
        
        .question-text {
            font-size: 15px;
            color: var(--text-primary);
            line-height: 1.6;
            margin-bottom: 16px;
        }
        
        /* 问题标签 */
        .question-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 16px;
        }
        
        .question-tag {
            padding: 4px 10px;
            border-radius: 4px;
            font-size: 12px;
            background-color: rgba(59, 130, 246, 0.1);
            color: var(--primary);
        }
        
        /* 问题图片 */
        .question-images {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            gap: 8px;
            margin-bottom: 16px;
        }
        
        .question-image {
            border-radius: 8px;
            overflow: hidden;
        }
        
        .question-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        /* 问题状态 */
        .question-status {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 12px;
            font-size: 13px;
            font-weight: 500;
            margin-bottom: 16px;
        }
        
        .status-solved {
            background-color: rgba(16, 185, 129, 0.1);
            color: var(--success);
        }
        
        .status-unsolved {
            background-color: rgba(245, 158, 11, 0.1);
            color: var(--warning);
        }
        
        /* 问题操作区 */
        .question-actions {
            display: flex;
            justify-content: center;
            gap: 24px;
            padding: 12px 0;
            border-top: 1px solid var(--border-light);
            border-bottom: 1px solid var(--border-light);
        }
        
        .question-action {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            color: var(--text-secondary);
            background: none;
            border: none;
            font-size: 12px;
        }
        
        .question-action i {
            font-size: 18px;
        }
        
        .question-action.liked {
            color: var(--danger);
        }
        
        .question-action.bookmarked {
            color: var(--primary);
        }
        
        /* 回答区域 */
        .answers-section {
            background-color: var(--bg-white);
            padding: 16px;
            margin-bottom: 12px;
        }
        
        .answers-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }
        
        .answers-title {
            font-size: 16px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .answers-count {
            color: var(--primary);
        }
        
        .sort-answers {
            font-size: 13px;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            gap: 4px;
            background: none;
            border: none;
        }
        
        /* 回答卡片 */
        .answer-card {
            padding: 16px 0;
            border-bottom: 1px solid var(--border-light);
        }
        
        .answer-card:last-child {
            border-bottom: none;
        }
        
        .answer-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
        }
        
        .answer-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .answer-author {
            flex: 1;
        }
        
        .answer-time {
            font-size: 12px;
            color: var(--text-tertiary);
        }
        
        .answer-badge {
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 11px;
            background-color: rgba(59, 130, 246, 0.1);
            color: var(--primary);
            font-weight: 500;
        }
        
        .answer-content {
            font-size: 15px;
            line-height: 1.6;
            margin-bottom: 12px;
        }
        
        .answer-images {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            gap: 8px;
            margin-bottom: 12px;
        }
        
        .answer-image {
            border-radius: 6px;
            overflow: hidden;
        }
        
        .answer-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .answer-footer {
            display: flex;
            justify-content: space-between;
        }
        
        .answer-actions {
            display: flex;
            gap: 16px;
        }
        
        .answer-action {
            display: flex;
            align-items: center;
            gap: 4px;
            color: var(--text-secondary);
            background: none;
            border: none;
            font-size: 13px;
        }
        
        .answer-action.liked {
            color: var(--danger);
        }
        
        .accepted-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
            background-color: var(--success);
            color: white;
        }
        
        /* 回复区域 */
        .replies-section {
            margin-top: 12px;
            padding-left: 46px; /* 与头像对齐 */
        }
        
        .reply-card {
            padding: 12px 0;
            border-bottom: 1px solid var(--border-light);
        }
        
        .reply-card:last-child {
            border-bottom: none;
        }
        
        .reply-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 6px;
        }
        
        .reply-avatar {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .reply-author {
            font-size: 13px;
            font-weight: 500;
        }
        
        .reply-time {
            font-size: 11px;
            color: var(--text-tertiary);
        }
        
        .reply-content {
            font-size: 14px;
            line-height: 1.5;
            margin-bottom: 8px;
        }
        
        .reply-actions {
            display: flex;
            gap: 16px;
            font-size: 12px;
        }
        
        .reply-action {
            display: flex;
            align-items: center;
            gap: 3px;
            color: var(--text-tertiary);
            background: none;
            border: none;
        }
        
        .reply-action.liked {
            color: var(--danger);
        }
        
        .show-replies {
            width: 100%;
            padding: 8px 0;
            background: none;
            border: none;
            color: var(--primary);
            font-size: 13px;
            text-align: left;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .reply-box {
            margin-top: 12px;
            display: flex;
            gap: 8px;
        }
        
        .reply-input {
            flex: 1;
            padding: 8px 12px;
            border-radius: 20px;
            border: 1px solid var(--border-light);
            background-color: var(--bg-light);
            font-size: 14px;
            outline: none;
        }
        
        .reply-send {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: var(--primary);
            color: white;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* 回答输入区 */
        .answer-input-section {
            background-color: var(--bg-white);
            padding: 16px;
            margin-bottom: 80px;
        }
        
        .answer-input-header {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 12px;
        }
        
        .answer-textarea {
            width: 100%;
            min-height: 100px;
            padding: 12px;
            border-radius: 8px;
            border: 1px solid var(--border-light);
            background-color: var(--bg-light);
            font-size: 15px;
            resize: vertical;
            outline: none;
            margin-bottom: 12px;
        }
        
        .answer-input-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .input-tools {
            display: flex;
            gap: 16px;
            color: var(--text-secondary);
        }
        
        .input-tool {
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 18px;
        }
        
        .submit-answer {
            padding: 8px 16px;
            border-radius: 6px;
            background-color: var(--primary);
            color: white;
            border: none;
            font-size: 15px;
            font-weight: 500;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 70px;
            background-color: var(--bg-white);
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid var(--border-light);
            z-index: 1000;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--text-tertiary);
            font-size: 11px;
            gap: 4px;
            text-decoration: none;
            flex: 1;
        }
        
        .nav-item.active {
            color: var(--primary);
        }
        
        .nav-icon {
            font-size: 22px;
        }
        
        /* 提示消息 */
        .toast {
            position: fixed;
            bottom: 90px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 8px 16px;
            border-radius: 6px;
            z-index: 9999;
            font-size: 14px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .toast.show {
            opacity: 1;
        }
        
        /* 加载更多回答 */
        .load-more-answers {
            width: 100%;
            padding: 12px;
            border-radius: 8px;
            background-color: var(--bg-white);
            border: 1px solid var(--border-light);
            color: var(--text-primary);
            font-size: 15px;
            margin-bottom: 12px;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <button class="nav-btn" id="backBtn">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div class="nav-title">问答详情</div>
        <button class="nav-btn primary" id="shareBtn">
            <i class="fas fa-share-alt"></i>
        </button>
    </div>
    
    <!-- 问答详情容器 -->
    <div class="question-detail-container">
        <div class="question-header">
            <img src="https://picsum.photos/id/64/100/100" alt="提问者头像" class="question-avatar">
            <div class="question-author">
                <div class="author-name">前端开发工程师</div>
                <div class="question-meta">
                    <span>发布于 2天前</span>
                    <span>•</span>
                    <span>浏览 1.2k</span>
                </div>
            </div>
            <button class="question-menu" id="questionMenuBtn">
                <i class="fas fa-ellipsis-h"></i>
            </button>
        </div>
        
        <div class="question-content">
            <div class="question-status status-solved">
                已解决
            </div>
            
            <h1 class="question-title">React和Vue在大型项目中哪个更有优势？从性能、生态和团队协作方面分析</h1>
            
            <div class="question-text">
                最近公司准备启动一个大型电商平台项目，技术选型上在React和Vue之间犹豫。团队成员两种技术都有使用经验，但缺乏大型项目的实践。<br><br>
                想了解在大型项目中，这两个框架各有什么优势和劣势？特别是在以下几个方面：<br>
                1. 性能表现（渲染效率、内存占用等）<br>
                2. 生态系统完善程度<br>
                3. 团队协作与代码维护<br>
                4. 学习曲线和开发效率<br><br>
                希望有经验的开发者能分享一下实际项目经验，帮助我们做出更合适的选择。
            </div>
            
            <div class="question-tags">
                <span class="question-tag">React</span>
                <span class="question-tag">Vue</span>
                <span class="question-tag">前端框架</span>
                <span class="question-tag">技术选型</span>
                <span class="question-tag">大型项目</span>
            </div>
            
            <div class="question-images">
                <div class="question-image">
                    <img src="https://picsum.photos/id/0/300/200" alt="相关图片1">
                </div>
                <div class="question-image">
                    <img src="https://picsum.photos/id/160/300/200" alt="相关图片2">
                </div>
            </div>
        </div>
        
        <div class="question-actions">
            <button class="question-action liked" id="likeBtn">
                <i class="fas fa-thumbs-up"></i>
                <span>86</span>
            </button>
            <button class="question-action bookmarked" id="bookmarkBtn">
                <i class="fas fa-bookmark"></i>
                <span>收藏</span>
            </button>
            <button class="question-action" id="followBtn">
                <i class="far fa-bell"></i>
                <span>关注</span>
            </button>
            <button class="question-action" id="reportBtn">
                <i class="far fa-flag"></i>
                <span>举报</span>
            </button>
        </div>
    </div>
    
    <!-- 回答区域 -->
    <div class="answers-section">
        <div class="answers-header">
            <div class="answers-title">
                <span>回答</span>
                <span class="answers-count">(32)</span>
            </div>
            <button class="sort-answers" id="sortAnswersBtn">
                <span>按最佳排序</span>
                <i class="fas fa-chevron-down"></i>
            </button>
        </div>
        
        <!-- 最佳回答 -->
        <div class="answer-card">
            <div class="answer-header">
                <img src="https://picsum.photos/id/177/100/100" alt="回答者头像" class="answer-avatar">
                <div class="answer-author">
                    <div class="author-name">
                        全栈技术专家 <span class="answer-badge">官方认证</span>
                    </div>
                    <div class="answer-time">回答于 1天前</div>
                </div>
            </div>
            
            <div class="answer-content">
                作为一个在大型项目中同时使用过React和Vue的开发者，我可以分享一些实际经验：<br><br>
                <strong>1. 性能表现</strong><br>
                两者性能都很优秀，但在大型应用中各有侧重：
                - React的虚拟DOM和Fiber架构在复杂状态更新时更有优势
                - Vue的响应式系统在小规模更新时可能更高效
                - 实际项目中差异不大，更多取决于代码质量<br><br>
                <strong>2. 生态系统</strong><br>
                React生态更庞大，尤其在大型应用工具链方面：
                - 状态管理：Redux、MobX等成熟方案
                - 路由：React Router功能完善
                - 企业级解决方案更多<br>
                Vue生态相对精简但足够用，官方提供的解决方案更统一<br><br>
                对于大型电商平台，我会更倾向于React，尤其是当团队规模较大时，React的严格模式和单向数据流更有利于维护。
            </div>
            
            <div class="answer-images">
                <div class="answer-image">
                    <img src="https://picsum.photos/id/180/300/200" alt="回答图片1">
                </div>
            </div>
            
            <div class="answer-footer">
                <div class="answer-actions">
                    <button class="answer-action liked" id="answerLike1">
                        <i class="fas fa-thumbs-up"></i>
                        <span>124</span>
                    </button>
                    <button class="answer-action" id="replyToAnswer1">
                        <i class="far fa-comment"></i>
                        <span>回复</span>
                    </button>
                </div>
                <div class="accepted-badge">
                    <i class="fas fa-check"></i>
                    <span>最佳回答</span>
                </div>
            </div>
            
            <!-- 回复区域 -->
            <div class="replies-section">
                <div class="reply-card">
                    <div class="reply-header">
                        <img src="https://picsum.photos/id/64/100/100" alt="回复者头像" class="reply-avatar">
                        <div>
                            <span class="reply-author">前端开发工程师</span>
                            <span class="reply-time">2小时前</span>
                        </div>
                    </div>
                    <div class="reply-content">
                        非常感谢您的详细分析！请问在团队成员技术背景不一的情况下，哪个框架更适合快速上手和协作？
                    </div>
                    <div class="reply-actions">
                        <button class="reply-action" id="replyLike1">
                            <i class="far fa-thumbs-up"></i>
                            <span>8</span>
                        </button>
                        <button class="reply-action" id="replyToReply1">
                            <i class="far fa-comment"></i>
                            <span>回复</span>
                        </button>
                    </div>
                </div>
                
                <div class="reply-card">
                    <div class="reply-header">
                        <img src="https://picsum.photos/id/177/100/100" alt="回复者头像" class="reply-avatar">
                        <div>
                            <span class="reply-author">全栈技术专家</span>
                            <span class="reply-time">1小时前</span>
                        </div>
                    </div>
                    <div class="reply-content">
                        @前端开发工程师 如果团队有很多新手，Vue可能更友好一些，文档更清晰，学习曲线更平缓。但React的函数式编程思想一旦掌握，长期来看更有利于大型项目维护。
                    </div>
                    <div class="reply-actions">
                        <button class="reply-action liked" id="replyLike2">
                            <i class="fas fa-thumbs-up"></i>
                            <span>15</span>
                        </button>
                        <button class="reply-action" id="replyToReply2">
                            <i class="far fa-comment"></i>
                            <span>回复</span>
                        </button>
                    </div>
                </div>
                
                <button class="show-replies" id="showMoreReplies1">
                    <i class="fas fa-chevron-down"></i>
                    <span>查看更多12条回复</span>
                </button>
                
                <div class="reply-box">
                    <img src="https://picsum.photos/id/237/100/100" alt="我的头像" class="reply-avatar">
                    <input type="text" class="reply-input" placeholder="添加回复...">
                    <button class="reply-send" id="sendReply1">
                        <i class="fas fa-paper-plane"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 其他回答 -->
        <div class="answer-card">
            <div class="answer-header">
                <img src="https://picsum.photos/id/239/100/100" alt="回答者头像" class="answer-avatar">
                <div class="answer-author">
                    <div class="author-name">Vue核心贡献者</div>
                    <div class="answer-time">回答于 1天前</div>
                </div>
            </div>
            
            <div class="answer-content">
                我想从Vue的角度补充几点：<br><br>
                Vue 3的Composition API在大型项目中带来了更好的代码组织方式，特别是对于逻辑复用和类型支持有了很大提升。<br><br>
                在团队协作方面，Vue的单文件组件(SFC)将模板、脚本和样式封装在一起，对于大型团队来说，更容易保持代码风格的一致性。<br><br>
                另外，Vue的官方工具链(Vue CLI, Vite)配置简单，开箱即用，对于需要快速启动的大型项目非常友好。
            </div>
            
            <div class="answer-footer">
                <div class="answer-actions">
                    <button class="answer-action" id="answerLike2">
                        <i class="far fa-thumbs-up"></i>
                        <span>68</span>
                    </button>
                    <button class="answer-action" id="replyToAnswer2">
                        <i class="far fa-comment"></i>
                        <span>回复</span>
                    </button>
                </div>
            </div>
            
            <!-- 回复区域 -->
            <div class="replies-section">
                <button class="show-replies" id="showMoreReplies2">
                    <i class="fas fa-chevron-down"></i>
                    <span>查看全部8条回复</span>
                </button>
                
                <div class="reply-box">
                    <img src="https://picsum.photos/id/237/100/100" alt="我的头像" class="reply-avatar">
                    <input type="text" class="reply-input" placeholder="添加回复...">
                    <button class="reply-send" id="sendReply2">
                        <i class="fas fa-paper-plane"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 加载更多回答 -->
    <button class="load-more-answers" id="loadMoreAnswersBtn">
        <i class="fas fa-spinner fa-spin"></i> 加载更多回答
    </button>
    
    <!-- 回答输入区 -->
    <div class="answer-input-section">
        <div class="answer-input-header">我来回答</div>
        <textarea class="answer-textarea" placeholder="分享你的经验或见解..."></textarea>
        <div class="answer-input-actions">
            <div class="input-tools">
                <button class="input-tool" id="addImageBtn">
                    <i class="far fa-image"></i>
                </button>
                <button class="input-tool" id="addCodeBtn">
                    <i class="fas fa-code"></i>
                </button>
                <button class="input-tool" id="addLinkBtn">
                    <i class="fas fa-link"></i>
                </button>
            </div>
            <button class="submit-answer" id="submitAnswerBtn">提交回答</button>
        </div>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="nav-item">
            <i class="fas fa-home nav-icon"></i>
            <span>首页</span>
        </a>
        <a href="#" class="nav-item active">
            <i class="fas fa-question-circle nav-icon"></i>
            <span>问答</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-compass nav-icon"></i>
            <span>发现</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-user nav-icon"></i>
            <span>我的</span>
        </a>
    </div>
    
    <!-- 提示消息 -->
    <div class="toast" id="toast"></div>
    
    <!-- 问答操作菜单 -->
    <div class="modal fade" id="questionMenuModal" tabindex="-1">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-body p-0">
                    <button class="btn w-100 text-start px-4 py-3 border-0" style="font-size: 15px;">
                        <i class="fas fa-share-alt me-2"></i> 分享问答
                    </button>
                    <button class="btn w-100 text-start px-4 py-3 border-0" style="font-size: 15px;">
                        <i class="fas fa-bookmark me-2"></i> 收藏问答
                    </button>
                    <button class="btn w-100 text-start px-4 py-3 border-0" style="font-size: 15px;">
                        <i class="fas fa-flag me-2"></i> 举报问题
                    </button>
                    <button class="btn w-100 text-start px-4 py-3 border-0 text-danger" style="font-size: 15px;">
                        <i class="fas fa-ban me-2"></i> 屏蔽作者
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // DOM元素
        const backBtn = document.getElementById('backBtn');
        const shareBtn = document.getElementById('shareBtn');
        const questionMenuBtn = document.getElementById('questionMenuBtn');
        const likeBtn = document.getElementById('likeBtn');
        const bookmarkBtn = document.getElementById('bookmarkBtn');
        const followBtn = document.getElementById('followBtn');
        const reportBtn = document.getElementById('reportBtn');
        const sortAnswersBtn = document.getElementById('sortAnswersBtn');
        const answerLike1 = document.getElementById('answerLike1');
        const answerLike2 = document.getElementById('answerLike2');
        const replyToAnswer1 = document.getElementById('replyToAnswer1');
        const replyToAnswer2 = document.getElementById('replyToAnswer2');
        const replyLike1 = document.getElementById('replyLike1');
        const replyLike2 = document.getElementById('replyLike2');
        const replyToReply1 = document.getElementById('replyToReply1');
        const replyToReply2 = document.getElementById('replyToReply2');
        const showMoreReplies1 = document.getElementById('showMoreReplies1');
        const showMoreReplies2 = document.getElementById('showMoreReplies2');
        const sendReply1 = document.getElementById('sendReply1');
        const sendReply2 = document.getElementById('sendReply2');
        const loadMoreAnswersBtn = document.getElementById('loadMoreAnswersBtn');
        const addImageBtn = document.getElementById('addImageBtn');
        const addCodeBtn = document.getElementById('addCodeBtn');
        const addLinkBtn = document.getElementById('addLinkBtn');
        const submitAnswerBtn = document.getElementById('submitAnswerBtn');
        const toast = document.getElementById('toast');
        const questionMenuModal = new bootstrap.Modal(document.getElementById('questionMenuModal'));
        const replyInputs = document.querySelectorAll('.reply-input');
        const answerTextarea = document.querySelector('.answer-textarea');
        
        // 显示提示消息
        function showToast(message) {
            toast.textContent = message;
            toast.classList.add('show');
            
            clearTimeout(toast.timeout);
            toast.timeout = setTimeout(() => {
                toast.classList.remove('show');
            }, 2000);
        }
        
        // 绑定事件
        function bindEvents() {
            // 返回按钮
            backBtn.addEventListener('click', () => {
                history.back();
                showToast('返回上一页');
            });
            
            // 分享按钮
            shareBtn.addEventListener('click', () => {
                showToast('分享功能待实现');
            });
            
            // 问题菜单
            questionMenuBtn.addEventListener('click', () => {
                questionMenuModal.show();
            });
            
            // 问题点赞
            likeBtn.addEventListener('click', function() {
                const icon = this.querySelector('i');
                const countEl = this.querySelector('span');
                let count = parseInt(countEl.textContent);
                
                if (this.classList.contains('liked')) {
                    this.classList.remove('liked');
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                    countEl.textContent = count - 1;
                    showToast('已取消点赞');
                } else {
                    this.classList.add('liked');
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                    countEl.textContent = count + 1;
                    showToast('点赞成功');
                }
            });
            
            // 问题收藏
            bookmarkBtn.addEventListener('click', function() {
                const icon = this.querySelector('i');
                
                if (this.classList.contains('bookmarked')) {
                    this.classList.remove('bookmarked');
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                    this.querySelector('span').textContent = '收藏';
                    showToast('已取消收藏');
                } else {
                    this.classList.add('bookmarked');
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                    this.querySelector('span').textContent = '已收藏';
                    showToast('收藏成功');
                }
            });
            
            // 关注问题
            followBtn.addEventListener('click', function() {
                const icon = this.querySelector('i');
                
                if (icon.classList.contains('fas')) {
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                    this.querySelector('span').textContent = '关注';
                    showToast('已取消关注');
                } else {
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                    this.querySelector('span').textContent = '已关注';
                    showToast('关注成功');
                }
            });
            
            // 举报问题
            reportBtn.addEventListener('click', () => {
                showToast('举报功能待实现');
            });
            
            // 排序回答
            sortAnswersBtn.addEventListener('click', function() {
                const currentText = this.querySelector('span').textContent;
                const options = ['按最佳排序', '按最新排序', '按点赞排序'];
                const currentIndex = options.indexOf(currentText);
                const nextIndex = (currentIndex + 1) % options.length;
                
                this.querySelector('span').textContent = options[nextIndex];
                showToast(`已按${options[nextIndex].substring(1)}`);
            });
            
            // 回答点赞
            [answerLike1, answerLike2].forEach(btn => {
                btn.addEventListener('click', function() {
                    const icon = this.querySelector('i');
                    const countEl = this.querySelector('span');
                    let count = parseInt(countEl.textContent);
                    
                    if (this.classList.contains('liked')) {
                        this.classList.remove('liked');
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        countEl.textContent = count - 1;
                        showToast('已取消点赞');
                    } else {
                        this.classList.add('liked');
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        countEl.textContent = count + 1;
                        showToast('点赞成功');
                    }
                });
            });
            
            // 回复回答
            [replyToAnswer1, replyToAnswer2].forEach((btn, index) => {
                btn.addEventListener('click', function() {
                    const replyInput = document.querySelectorAll('.reply-input')[index];
                    replyInput.focus();
                    showToast('请输入回复内容');
                });
            });
            
            // 回复点赞
            [replyLike1, replyLike2].forEach(btn => {
                btn.addEventListener('click', function() {
                    const icon = this.querySelector('i');
                    const countEl = this.querySelector('span');
                    let count = parseInt(countEl.textContent);
                    
                    if (this.classList.contains('liked')) {
                        this.classList.remove('liked');
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        countEl.textContent = count - 1;
                        showToast('已取消点赞');
                    } else {
                        this.classList.add('liked');
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        countEl.textContent = count + 1;
                        showToast('点赞成功');
                    }
                });
            });
            
            // 回复回复
            [replyToReply1, replyToReply2].forEach((btn, index) => {
                btn.addEventListener('click', function() {
                    const replyInput = document.querySelectorAll('.reply-input')[Math.floor(index / 2)];
                    const replyAuthor = this.closest('.reply-card').querySelector('.reply-author').textContent;
                    replyInput.value = `@${replyAuthor} `;
                    replyInput.focus();
                });
            });
            
            // 显示更多回复
            [showMoreReplies1, showMoreReplies2].forEach(btn => {
                btn.addEventListener('click', function() {
                    const icon = this.querySelector('i');
                    const text = this.querySelector('span');
                    
                    if (icon.classList.contains('fa-chevron-down')) {
                        icon.classList.remove('fa-chevron-down');
                        icon.classList.add('fa-chevron-up');
                        text.textContent = '收起回复';
                        showToast('已显示全部回复');
                    } else {
                        icon.classList.remove('fa-chevron-up');
                        icon.classList.add('fa-chevron-down');
                        text.textContent = text.textContent.replace('收起', '查看全部');
                        showToast('已收起回复');
                    }
                });
            });
            
            // 发送回复
            [sendReply1, sendReply2].forEach((btn, index) => {
                btn.addEventListener('click', function() {
                    const replyInput = document.querySelectorAll('.reply-input')[index];
                    const replyText = replyInput.value.trim();
                    
                    if (replyText) {
                        replyInput.value = '';
                        showToast('回复成功');
                    } else {
                        showToast('请输入回复内容');
                    }
                });
            });
            
            // 回复框回车发送
            replyInputs.forEach(input => {
                input.addEventListener('keyup', function(e) {
                    if (e.key === 'Enter') {
                        const replyText = this.value.trim();
                        if (replyText) {
                            this.value = '';
                            showToast('回复成功');
                        }
                    }
                });
            });
            
            // 加载更多回答
            loadMoreAnswersBtn.addEventListener('click', function() {
                this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 加载中...';
                setTimeout(() => {
                    this.innerHTML = '<i class="fas fa-plus"></i> 加载更多回答';
                    showToast('已加载更多回答');
                }, 1500);
            });
            
            // 回答输入工具
            addImageBtn.addEventListener('click', () => {
                showToast('图片上传功能待实现');
            });
            
            addCodeBtn.addEventListener('click', () => {
                showToast('代码插入功能待实现');
            });
            
            addLinkBtn.addEventListener('click', () => {
                showToast('链接插入功能待实现');
            });
            
            // 提交回答
            submitAnswerBtn.addEventListener('click', () => {
                const answerText = answerTextarea.value.trim();
                
                if (answerText) {
                    answerTextarea.value = '';
                    showToast('回答提交成功，等待审核');
                } else {
                    showToast('请输入回答内容');
                }
            });
        }
        
        // 初始化
        function init() {
            bindEvents();
        }
        
        // 启动
        init();
    </script>
</body>
</html>
